<template lang="html">
  <div  class="headerModule">
    <!-- <el-row :gutter="0">
         <el-col :xs="0" :sm="2" :md="2" :lg="4">
           <div class="headerModule-red">

           </div>
         </el-col>
         <el-col :xs="24" :sm="20" :md="20" :lg="16">
              <el-col :xs="10" :sm="6" :md="6" :lg="4">

                  <router-link    to="/home" >LOGO</router-link>
              </el-col>


              <el-col  :xs="{span:0,offset:10}" :sm="{span:12,offset:6}" :md="{span:10,offset:8}" :lg="{span:8,offset:12}"  class="items-ul">
                <ul class="ul-display">
                    <li v-for="item in items">
                      <a class="item-a" v-bind:href="item.url">{{ item.name }}</a>
                    </li>

                </ul>
              </el-col>




         </el-col>
         <el-col :xs="0" :sm="2" :md="2" :lg="4">
            <div class="headerModule-red">

            </div>
         </el-col>

    </el-row> -->
    <el-row class="header-nav">
        <el-col :xs="24" :sm="{span:11,offset:1}" :md="{span:5,offset:1}" :lg="{span:3,offset:1}">
            <img src="" alt="LOGO" class="logo-img">
        </el-col>
        <el-col :xs="0" :sm="{sapn:11,offset:1}" :md="{span:5,offset:13}" :lg="{sapn:5,offset:15}">
          <ul class="ul-display">
              <li v-for="item in items">
                <a class="item-a" v-bind:href="item.url">{{ item.name }}</a>
              </li>
          </ul>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: 'headerModule',
    data() {
        return {

            items: [{
                name: 'item1',
                url: '/user'
            }, {
                name: 'item2',
                url: '/auto1'
            }, {
                name: 'item3',
                url: '/auto2'
            }]
        }
    },
    methods: {

    }
}
</script>

<style lang="css">
/*@media screen and  (max-width: 992px) {

}*/
/*.headerModule{
height:60px;

  background-color: #000;
  box-shadow: 0px 5px 10px #000;

}
a{
  font-size: 16px;
  color: #fff;
  line-height: 50px;

}
.ul-display{


}
.item-a{
margin: 0px 20px;
}
.headerModule-red{
  height: 60px;
  background-color: #000;
}
.items-ul{
  height: 60px;
  background-color: rgb(56, 147, 194);
}*/
.headerModule{
  margin-bottom: 10px;
  box-shadow: 0px 5px 10px rgba(106, 106, 106, 0.44);
}
.header-nav{

  height: 50px;
  background-color: #fff;

}
.logo-img{
  line-height: 50px;
  
}
.ul-display{

}
.item-a{
  color: #000;
  font-style: none;
  margin-right: 30px;
}
</style>
